<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Contained Sticky Scroll Demo - A jQuery Plugin by Echo Enduring Media</title>
		<script src="mootools-core-uncompressed.js" type="text/javascript"></script> 

		<script type="text/javascript" src="mootools-contained-sticky-scroll.js"></script>
		<script type="text/javascript">
		window.addEvent('domready', function() {
			new containedStickyScroll(document.id('sidebar'));
		});
		</script>
		<style type="text/css">
		
			#wrapper {
				margin-left:auto;
				margin-right:auto;
				width:960px;
			}

			.container { display:inline;float:left;margin-left:10px;margin-right:10px }
		
			#main { width:620px;  }
			#sidebar { width: 300px; }
			
			.clear { clear: both; }
		</style>
	</head>
	<body>

		<div id="wrapper">

			<div id="header" class="container">

				<h1>Contained Sticky Scroll Demo</h1>
				<p>Mootools port of the Contained Sticky Scroll</p>

			</div>
			
			<br class="clear" />
		
			<div>

			<div id="main" class="container">
			
				<p>The Contained Sticky Scroll is designed to allow an element to stick to the top of the screen as page scrolls down, but without moving outside of the parent container.</p>
				<p>Look at the right how it behaves.</p>
				
				<p>This Contained Sticky Scroll is derived from a jQuery plugin of <a href="http://blog.echoenduring.com/2010/11/15/freebie-contained-sticky-scroll-jquery-plugin/">Matt Ward</a>.
				
				<p>In this project the plugin is ported to <a href="http://mootools.net/">Mootools</a> 1.3. This port is initiated by Mark Visser and can be found in <a href="http://code.google.com/">Google Code<a> under <a href="http://code.google.com/p/contained-sticky-scroll/">contained-sticky-scroll</a>.</p>
				
				<p>Load the <code>mootools-contained-sticky-scroll.js</code> and use the following code to initiate the Contained Sticky Scroll:</p>
				<code>window.addEvent('domready', function() { new containedStickyScroll(document.id('sidebar')); });</code>
				
				<p>View the source of this document to see how it works.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

			</div>
			
			<div id="sidebar" class="container">

				<p>This text sticks to the top of your window while scrolling up and down. But it stays inside the boundaries of its parent element.</p>

			</div>

			<br class="clear" />
			
			</div>
			
			<div id="footer" class="container">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque leo purus, elementum nec pharetra vel, semper non odio. Integer tellus orci, sollicitudin et feugiat eget, vehicula a urna. Etiam tempus rhoncus venenatis. Duis in nisi orci, eget pulvinar nunc. Mauris convallis volutpat justo, eget tempus nisi lobortis a. Sed et urna ut metus laoreet consequat in eu magna. Curabitur a felis metus, luctus imperdiet urna. Nam suscipit elit vitae nisi mattis volutpat. Sed commodo accumsan dolor ac iaculis. Fusce vitae luctus tortor. Praesent pharetra blandit nisl at dignissim. Mauris nec odio velit, quis commodo nunc. Nunc nisl nunc, porttitor at elementum non, vulputate quis nulla. Suspendisse potenti. Aenean iaculis ullamcorper suscipit. Quisque molestie ultricies nunc quis ultricies.</p>

			</div>

		</div>

	</body>
</html>